<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<div class="big-box">
					<div class="info-box" :class="[showInfo == true ? 'paddYes' : 'paddNo']">
						<block v-if="showInfo">
							<div class="info-left">
								<div class="center">
									<image src="../../static/img/museumStart.png" mode="aspectFill" class="icon">
									</image>
									<span class="jiu-font28-fff">{{ collectionInfo.info.name }}</span>
								</div>
								<span class="jiu-font24-555 collention-desc">{{ collectionInfo.info.desc }}</span>
								<span class="end-text">共{{ collectionInfo.boothCollectionCount || 0 }}个藏品</span>
							</div>
							<div class="info-right">
								<div style="position: relative;">
									<image src="../../static/img/museumBg.png" mode="heightFix" class="right-bg">
									</image>
									<span class="right-text">NO.{{  collectionInfo.info.id}}</span>
								</div>
								<span class="center" @tap="enterDetail(collectionInfo.info.id)"
									style="margin-top: 3.47vw;font-size: 3.2vw;font-weight: 300;color: #A972FF;justify-content: end;width: 100%;">
									立即进入<image src="../../static/img/enter16.png" mode="aspectFill" class="image427">
									</image>
								</span>
							</div>
						</block>
						<block v-else>
							<div class="info-left" style="margin-top: 4.27vw;">
								<div class="center">
									<span class="jiu-font28-fff">个人数字藏馆</span>
								</div>
								<span class="jiu-font24-555"
									style="width: 34.13vw;display: block;margin-top: 1.07vw;color: #FFCE80;">开启条件：在九歌灵藏拥有5个数字藏品</span>
								<span class="open-btn" @tap="toCreateMuseum">立即开启</span>
							</div>
							<div class="info-right">
								<image src="@/static/img/createMuseum.png" mode="aspectFill"
									style="width: 36.8vw;height: 36.8vw;"></image>
							</div>
						</block>
					</div>

					<span class="title jiu-font32-555">逛逛展</span>

					<div class="list-box" v-if="page.list.length > 0">
						<div class="item-box" v-for="item,index in page.list" @tap="toMuseumDetail(item.info.id)">
							<image :src="item.owner.avatar" mode="aspectFill" class="item-bg"></image>
							<image src="../../static/img/museumIcon.png" mode="aspectFill" class="item-icon"></image>
							<div class="icon-info">
								<span class="jiu-font28-fff"
									style="width: 100%;overflow: hidden;text-overflow: ellipsis;">{{ item.info.name }}</span>
								<span class="jiu-font10-a97">{{ item.owner.nickname }}</span>
								<div class="nums" @tap.stop="$u.throttle(onLike(index), 500)">
									<image src="../../static/img/dianzan.png" mode="aspectFill" class="nums-img">
									</image>
									<span class="jiu-font24-aaa"
										style="margin-left: 1.07vw;color: #FFCE80;">{{ item.likeCount }}</span>
								</div>
								<div>
									<image src="../../static/img/enter16.png" mode="aspectFill" class="nums-img"
										style="transform: rotate(90deg);"></image>
								</div>
							</div>
						</div>
					</div>
					
					<div class="img-box" v-else>
						<image src="@/static/img/noProduct.png" mode="aspectFill"
							style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
					</div>
				</div>
			</ma-refresh>
		</ma-body>
	</div>
</template>

<script>
	import Refresh from '@/$ma/common/js/refresh.js';
	export default {
		data() {
			return {
				showInfo: false,
				page: new Refresh(this, {
					apiName: 'getCollectionPage'
				}),
				collectionInfo: {}
			}
		},
		methods: {
			toMuseumDetail(id) {
				this.$ma.route.museumDetail({
					id: id
				})
			},
			toCreateMuseum() {
				this.$ma.route.createMuseum()
			},
			onLike(index) {
				let id = this.page.list[index].info.id;
				this.$u.api.onCollectionInfoLike({}, id).then(res => {
					console.log(res)
					// if(res.msg == '点赞成功'){
					// 	this.page.list[index].likeCount++
					// }else if(res.msg == '取消点赞'){
					// 	this.page.list[index].likeCount--
					// }
					this.page.onRefresh()
				})
			},
			async getCollectionInfoAggrMy() {
				let res = await this.$u.api.getCollectionInfoAggrMy();
				console.log('信息', res);
				this.collectionInfo = res;
				if (res) {
					this.showInfo = true;
				} else {
					this.showInfo = false
				}
			},
			enterDetail(id){
				this.$ma.route.myMuseumDetail({
					id: id
				})
			}
		},
		async onLoad() {
			await this.page.onRefresh();
		},
		mounted() {
			this.getCollectionInfoAggrMy();
		}
	}
</script>

<style lang="scss">
	.img-box {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.paddYes {
		padding: 5.33vw 4.27vw 6.4vw 4.27vw;
	}

	.paddNo {
		padding: 2.13vw 4.27vw;
	}

	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.center {
		display: flex;
		align-items: center;
	}

	.right-bg {
		width: 37.33vw;
		height: 21.33vw;
		display: block;
	}

	.right-text {
		width: 21.33vw;
		text-align: center;
		font-size: 2.67vw;
		font-weight: 600;
		color: #000;
		position: absolute;
		top: 14.1vw;
		// right: 10vw;
		left: 8vw;
	}

	.info-box {
		display: flex;
		justify-content: space-between;
		background-color: #1b1b1b;
		margin: 4.27vw;
		border-radius: 4.27vw;

		.info-left {
			display: flex;
			flex-direction: column;

			.icon {
				width: 4.27vw;
				height: 4.27vw;
				margin-right: 1.07vw;
			}

			.open-btn {
				width: 21.33vw;
				line-height: 8.53vw;
				background: #A972FF;
				box-shadow: 0vw 1vw 2vw rgba(71, 12, 114, 0.48);
				font-size: 3.2vw;
				font-weight: 500;
				color: #000;
				border-radius: 5.33vw;
				margin-top: 4.27vw;
				text-align: center;
			}
		}

		.info-right {
			display: flex;
			flex-direction: column;
			text-align: end;


		}

		.end-text {
			flex: 1;
			display: flex;
			align-items: end;
			color: #ffce80;
			font-size: 3.2vw;
			font-weight: 300;
		}

	}

	.title {
		display: block;
		margin-top: 8.53vw;
		margin-left: 4.27vw;
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		padding-left: 4.27vw;

		.item-box {
			padding: 4.27vw;
			padding-bottom: 3.2vw;
			background-color: #1B1B1B;
			border-radius: 14.67vw;
			position: relative;
			margin-top: 2.67vw;
			margin-right: 2.13vw;

			.item-bg {
				width: 20.53vw;
				height: 20.53vw;
				border-radius: 50%;
			}

			.item-icon {
				width: 8.53vw;
				height: 8.53vw;
				position: absolute;
				top: 16.27vw;
				left: 4.27vw;
			}

			.icon-info {
				margin-top: 2.13vw;
				text-align: center;
				display: flex;
				flex-direction: column;

				.nums-img {
					width: 4.27vw;
					height: 4.27vw;
				}

				.nums {
					margin-top: 2.13vw;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.collention-desc {
		margin-top: 1.07vw;
		width: 34.13vw;
		display: block;
		// width: 33.87vw;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
	}
</style>
